// 固定总时间的匀速运动
let maxWidth = document.documentElement.clientWidth || document.body.clientWidth,
    maxHeight = document.documentElement.clientHeight || document.body.clientHeight,
    box = document.getElementById('box');



let duration = 1000,//总时间
    time = 0,
    interval = 17,
    // 目标结束值
    target = {
        left: maxWidth - box.offsetWidth,
        top: maxHeight - box.offsetHeight,
        fontSize: 40,
        width: 50,
        height: 50,
        borderRadius: '50%',
        background: 'green',
        opacity: 0.9
    },
    // 目标起始值
    begin = {} //包括width height filter fontsize... left top opacity也是string类型
for (let key in target) {
    begin[key] = parseFloat(window.getComputedStyle(box, null)[key])
}
console.log(begin)

let timer1 = setInterval(function () {
    time += interval
    for (let key in target) {
        if (!target.hasOwnProperty(key)) break
        let reg = /^-?\d+(\.\d+)?(px|rem|em|pt)?$/i
        box['style'][key] = time * (target[key] - begin[key]) / duration + begin[key] + reg.test(target[key]) ? 'px' : 'aa'
        console.log( box['style']['opacity'])

    }

    if (time >= duration) {
        for (let key in target) {
            if (!target.hasOwnProperty(key)) break
            box['style']['left'] = target['left'] + 'px'
            box['style']['top'] = target['top'] + 'px'

        }
        clearInterval(timer1)
    }
}, interval)
